<template>
  <div>
    <el-menu
      :collapse="collapse"
      :background-color="bg"
      :text-color="textColor"
      :unique-opened="true"
    >
      <template v-for="(item, i) in treeData">
        <el-submenu :index="i + ''" :key="i" v-if="validatenull(item.children)">
          <template slot="title">
            <i :class="item.icon || 'el-icon-menu'"></i>
            <span slot="title">{{item.name}}</span>
          </template>
          <el-menu-item
            v-for="(child, index) in item.children"
            :key="index"
            @click="loadRouter(child)"
          >
            <i v-if="child.icon" :class="child.icon"></i>
            <span slot="title">{{child.name}}</span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item :key="i" v-else @click="loadRouter(item)">
          <i :class="item.icon || 'el-icon-menu'"></i>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script>
import treeData from '../../data/componentsMenu'
export default {
  props: {
    collapse: {
      default: false
    },
    bg: {
      default: "#3C65D7"
    },
    textColor: {
      default: "white"
    }
  },
  data() {
    return {
      treeData: []
    };
  },
  methods: {
    validatenull(value) {
      if (value && value.length) {
        return true;
      }
      return false;
    },
    loadRouter(data) {
      console.log(data);
      if (data.router) {
        this.$router.push({
          name: data.router
        });
      }
    }
  },
  created() {
    this.treeData = treeData
  }
};
</script>
<style scoped>
</style>
